<template>
    <div class="table-card" v-if="order">
        <OrderInfo :user-order="order"></OrderInfo>
        <tbody>
            <tr>
                <th class="goods-img">宝贝图片</th>
                <th class="goods-name">宝贝名称</th>
                <th class="goods-price">单价</th>
                <th class="goods-count">数量</th>
                <th class="total-price">付款</th>
                <th class="order-state">状态</th>
                <th class="order-active">操作</th>
            </tr>
        </tbody>
        <tbody v-if="order.orderlists">
        <tr v-for="orderlist in order.orderlists">
            <td class="goods-img" >
                <img v-if="orderlist.goods" :src="startUrl+orderlist.goods.goodsPicturepaths[0].gpPicpath" alt="">
            </td>
            <td class="goods-name">
                <span v-if="orderlist.goods">
                    {{orderlist.goods.goodsname}}
                </span>
            </td>
            <td class="goods-price">
                <span v-if="orderlist.goods">
                     {{orderlist.goods.goodsprice}}
                </span>
            </td>
            <td class="goods-count">
                <span v-if="orderlist.goods">
                    {{orderlist.oCount}}
                </span>
            </td>
            <td class="total-price">
                <span v-if="orderlist.goods">
                    ￥{{orderlist.goods.goodsprice*orderlist.oCount}}
                </span>

            </td>
            <td class="order-state">
                <div>
                    {{orderStatus[order.uoOrderstatus]}}
                </div>
<!--                <el-divider v-if="order.uoOrderstatus == '3'"></el-divider>-->
<!--                <div v-if="order.uoOrderstatus == '3'">-->
<!--                    {{orderStatus[order.uoOrderstatus+2]}}-->
<!--                </div>-->
            </td>
            <td class="order-active">
                <el-button v-if="order.uoOrderstatus=='0'" type="danger" @click=""
                           :disabled="order.uoOrderstatus=='0' ? false:true"
                           @click="goToPay"
                >付款</el-button>
                <el-button v-else-if="order.uoOrderstatus=='1'" type="success" @click=""
                           :disabled="order.uoOrderstatus=='0' ? false:true"
                >等待发货</el-button>
                <el-button v-else-if="order.uoOrderstatus=='3'" type="success" @click=""
                           :disabled="order.uoOrderstatus=='0' ? false:true"
                >等待送达</el-button>
                <el-button v-else-if="order.uoOrderstatus=='5'" type="success" @click=""
                           :disabled="order.uoOrderstatus=='5' ? false:true"
                           @click="changeOrderStatus"
                >收货</el-button>

                <el-button v-else-if="order.uoOrderstatus=='6'" type="primary" @click=""
                           :disabled="order.uoOrderstatus=='6' ? false:true"
                           @click="giveValue"
                >评价</el-button>
            </td>
        </tr>
        </tbody>
    </div>
</template>

<script>
    import OrderInfo from "../components/OrderInfo";
    export default {
        props:['order'],
        data() {
            return {
                orderStatus:this.$store.state.orderStatus,
                startUrl:this.$store.state.beginUrl,
                goods_img: require("../views/frontstage/cardImg/1.jpg"),
                goods_name: '【风雅司制】静华大袖衫交领襦裙绣花传统水墨渐变',
                goods_price:'233.00',
                goods_count:'1',
                total_price:'233.00',
                order_state:'待发货',
                orderInfo:null,
            };

        },
        created() {
            // console.log("商品信息创建");
        },
        mounted() {
        },
        methods:{
            goToPay(){
                console.log('进入支付页面存储数据');
                var orderInfo = null;
                console.log(this.order);

                let totalPay = this.getTotalPay(this.order);
                let goodsName = this.getGoodsName(this.order);
                orderInfo={
                    orderId:this.order.uoOrderid+"O"+this.getOutTradeNo(),
                    payMonney:totalPay,
                    goodsName:goodsName,
                };
                window.location.href="http://192.168.1.108:90?orderId="+orderInfo.orderId+"&payMonney="+orderInfo.payMonney+"&goodsName="+orderInfo.goodsName;

            },
            getTotalPay(order){
                var sum = 0;
                let length = order.orderlists.length;
                for (let i = 0; i < length; i++) {
                    let number = order.orderlists[i].goods.goodsprice*order.orderlists[i].goods.goodsdiscount / 10 * order.orderlists[i].oCount;
                    sum +=number;
                }
                return sum;
            },
            getGoodsName(order){
                var name = '';
                let length = order.orderlists.length;
                for (let i = 0; i < length; i++) {
                    if (i ==0 ){
                        name = order.orderlists[i].goods.goodsname.trim();
                    }else {
                        name.trim().concat(','+order.orderlists[i].goods.goodsname);
                    }
                }
                return name;
            },
            giveValue(){
                window.location.reload();

            },
            changeOrderStatus(){
                console.log(888);
                const time = new Date().getTime();
                let date = this.$moment(time).format('YYYY-MM-DD HH:mm:ss');
                let updateData={
                    'uoOrderid':this.order.uoOrderid,
                    'uoArrivaltime':date,
                    'uoConfirmreceipttime':date,
                    'uoOrderstatus':'6',
                };
                /*更改为付款*/
                this.$axios.post("/userorderlist/update",updateData).then(result=>{
                    console.log(result.data);
                    if (result.data){
                        console.log('收货成功');
                        this.$message.success("小主，恭喜收到汉服！美美哒！");
                        window.location.reload();
                    }
                })
            },
            getOutTradeNo(){
                var vNow = new Date();
                var sNow = "";
                sNow += String(vNow.getFullYear());
                sNow += String(vNow.getMonth() + 1);
                sNow += String(vNow.getDate());
                sNow += String(vNow.getHours());
                sNow += String(vNow.getMinutes());
                sNow += String(vNow.getSeconds());
                sNow += String(vNow.getMilliseconds());
                return sNow;
            },

        },
        components:{
            OrderInfo
        },
    };
</script>
<style scoped>
    .borderLine{
        outline: 1px solid red;
    }
    .table-card{
        margin-bottom: 20px;
    }
    /deep/.el-tabs__header{
        width: 71.5vw;
    }
    /deep/.el-tabs__nav>div{
        font-size: 16px;
        font-weight: 800;
    }
    .el-tabs{
        margin-left: 13.5vw;
    }
    img{
        height: 50px;
        width: 40px;
        display: inline-block;
    }
    td{
        text-align:center;
        width: 10vw;
        border: 1px solid silver;
        background-color: rgb(245,245,245);
    }
    th{
        background-color: #272727;
        border-bottom: none;
        color: #dfdfdf;
        padding: 10px 0;
    }

</style>